<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="John Doe's blog articles on web development and design">
    <title>Blog | John Doe</title>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@700&family=Fira+Code&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body class="font-inter bg-white text-dark">
    <!-- Navigation -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all">
        <nav class="container flex items-center justify-between py-4">
            <a href="/" class="font-montserrat font-bold text-primary text-xl">JD</a>
            <div class="hidden md:flex space-x-8">
                <a href="/" class="text-gray-600 hover:text-primary">Home</a>
                <a href="/about.html" class="text-gray-600 hover:text-primary">About</a>
                <a href="/projects.html" class="text-gray-600 hover:text-primary">Projects</a>
                <a href="/blog.html" class="text-primary hover:text-secondary">Blog</a>
                <a href="/contact.html" class="text-gray-600 hover:text-primary">Contact</a>
            </div>
            <button class="md:hidden" aria-expanded="false" aria-label="Menu">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </nav>
    </header>

    <!-- Blog Section -->
    <main class="container py-8 md:py-16">
        <h1 class="font-montserrat text-3xl md:text-4xl font-bold mb-8 text-center">Blog Articles</h1>
        
        <!-- Blog Filters -->
        <section aria-label="Blog filters" class="mb-12">
            <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="relative w-full md:w-auto">
                    <input type="text" placeholder="Search articles..." 
                           class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                           aria-label="Search blog articles">
                    <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
                <div class="flex gap-2 w-full md:w-auto">
                    <button class="btn btn-primary">All</button>
                    <button class="btn btn-secondary">Web Dev</button>
                    <button class="btn btn-secondary">Design</button>
                </div>
            </div>
        </section>

        <!-- Blog List -->
        <section aria-label="Blog articles list">
            <!-- Article 1 -->
            <article class="card mb-8 group" tabindex="0">
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="md:w-1/3">
                        <picture>
                            <source srcset="/assets/images/blog1.webp" type="image/webp">
                            <img src="/assets/images/blog1.jpg" 
                                 alt="Modern JavaScript Features" 
                                 class="card-img"
                                 loading="lazy"
                                 width="800"
                                 height="450">
                        </picture>
                    </div>
                    <div class="md:w-2/3">
                        <div class="flex items-center mb-2">
                            <span class="tag tag-primary">Web Dev</span>
                            <span class="text-gray-500 text-sm ml-4">June 15, 2023</span>
                        </div>
                        <h2 class="font-montserrat text-2xl font-semibold mb-3">Modern JavaScript Features You Should Know</h2>
                        <p class="text-gray-600 mb-4">
                            Explore the latest JavaScript features that can make your code more concise and expressive. 
                            Learn about optional chaining, nullish coalescing, and more.
                        </p>
                        <a href="#" class="text-primary hover:text-secondary font-medium" aria-label="Read Modern JavaScript Features article">
                            Read More <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </article>

            <!-- Article 2 -->
            <article class="card mb-8 group" tabindex="0">
                <div class="flex flex-col md:flex-row gap-6">
                    <div class="md:w-1/3">
                        <picture>
                            <source srcset="/assets/images/blog2.webp" type="image/webp">
                            <img src="/assets/images/blog2.jpg" 
                                 alt="Responsive Design Principles" 
                                 class="card-img"
                                 loading="lazy"
                                 width="800"
                                 height="450">
                        </picture>
                    </div>
                    <div class="md:w-2/3">
                        <div class="flex items-center mb-2">
                            <span class="tag tag-primary">Design</span>
                            <span class="text-gray-500 text-sm ml-4">May 22, 2023</span>
                        </div>
                        <h2 class="font-montserrat text-2xl font-semibold mb-3">Responsive Design Principles for 2023</h2>
                        <p class="text-gray-600 mb-4">
                            Discover the fundamental principles of responsive web design and how to implement them 
                            effectively in your projects using modern CSS techniques.
                        </p>
                        <a href="#" class="text-primary hover:text-secondary font-medium" aria-label="Read Responsive Design Principles article">
                            Read More <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </article>

            <!-- Pagination -->
            <nav aria-label="Blog pagination" class="mt-12">
                <ul class="flex justify-center gap-2">
                    <li>
                        <button class="px-4 py-2 rounded-md border text-gray-600 hover:bg-gray-50" aria-label="Previous page">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                    </li>
                    <li>
                        <button class="px-4 py-2 rounded-md bg-primary text-white" aria-label="Page 1" aria-current="true">1</button>
                    </li>
                    <li>
                        <button class="px-4 py-2 rounded-md border text-gray-600 hover:bg-gray-50" aria-label="Page 2">2</button>
                    </li>
                    <li>
                        <button class="px-4 py-2 rounded-md border text-gray-600 hover:bg-gray-50" aria-label="Page 3">3</button>
                    </li>
                    <li>
                        <button class="px-4 py-2 rounded-md border text-gray-600 hover:bg-gray-50" aria-label="Next page">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </li>
                </ul>
            </nav>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-dark text-white py-8">
        <div class="container">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p>&copy; 2023 John Doe. All rights reserved.</p>
                </div>
                <div class="flex space-x-6">
                    <a href="https://github.com" aria-label="GitHub" class="hover:text-primary">
                        <i class="fab fa-github text-xl"></i>
                    </a>
                    <a href="https://linkedin.com" aria-label="LinkedIn" class="hover:text-primary">
                        <i class="fab fa-linkedin text-xl"></i>
                    </a>
                    <a href="https://twitter.com" aria-label="Twitter" class="hover:text-primary">
                        <i class="fab fa-twitter text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Custom JS -->
    <script src="/js/app.js"></script>
</body>
</html>